<template>
    <div class="my-dynamic">
        <van-nav-bar
            class="app-nav-bar"
            title="我的动态"
            @click-left="$router.back()"
            >
            <div slot="left">
            <van-icon color="#fff" size="25" name="arrow-left" />
            </div>
        </van-nav-bar>
            <van-tabs v-model="active" border @change="changeDynamicTabs">
                <van-tab v-for="(tab,index) in tabList" :key="index" :title="tab" >
                     <div class="mydynamic-content">
                         <!-- 作品 -->
                         <div class="myarticle" v-show="active === 0" >
                             <van-list
                                v-model="loading"
                                :finished="finished"
                                finished-text="没有更多了"
                                @load="onLoad"
                                >
                                <van-cell :to= "{ name:'Article',params: { articleId: article.art_id } }" border v-for="(article,index) in articleList" :key="index">
                                    <article-item :article="article"></article-item>
                                </van-cell>
                            </van-list>
                        </div>
                         <!-- 作品 -->
                        <!-- 公告 -->
                        <div class="announcements-content" v-show="active === 1">
                            <van-cell border v-for="(announcement,index) in announcementList" :key="index">
                                <div slot="title">{{ announcement.title }}</div>
                                <div slot="label">{{ announcement.pubdate }}</div>
                            </van-cell>
                        </div>
                        <!-- 公告 -->
                        <!-- 用户统计 -->
                        <div class="figure-content" v-show="active === 2">
                            <van-row>
                                <van-col span="10">
                                    <van-cell title="粉丝数" :label= "`${figureData.fans_count}人`" is-link ></van-cell>
                                </van-col>
                                <van-col span="10">
                                    <van-cell title="阅读数" :label="`${figureData.read_count}人`" is-link></van-cell>
                                </van-col>
                            </van-row>
                        </div>
                        <!-- 用户统计 -->
                     </div>
                </van-tab>
            </van-tabs>
    </div>
</template>

<script>
import ArticleItem from '@/views/home/components/articleItem'
import {
    getUserCreatedArticle,
    getUserFigure,
    getAnnouncements
} from '@/api/user' 
export default {
    name: 'Mydynamic',
    components: {
        ArticleItem
    },
    data() {
        return {
            active: 0,
            loading: false,
            finished: false,
            tabList: ['作品','公告','数据'],
            page: 1,
            per_page: 10,
            articleList:[],
            announcementList: [],
            figureData: {}
        };
    },

    mounted() {
    },

    methods: {
        // 获取用户作品
       onLoad () {
           this.loadUserArticle()
       },
       changeDynamicTabs (name,title) {
           console.log(name,title)
           this.page = 1
           switch (name) {
               case 0 :
                   this.articleList = []
                   this.loadUserArticle()
                   break;
               case 1 :
                   this.announcementList = []
                   this.loadAnnouncements()
                   break;
               case 2 :
                   this.loadUserFigure() 
                   break; 
           }
       },
       // 获取用户创建的文章
       async loadUserArticle () {
           try {
            const { data:{data} } = await getUserCreatedArticle ({
                page: this.page,
                per_page: this.per_page
            })
            console.log(data)
            this.articleList.push(...data.results)
            // 加载状态结束
            this.loading = false;
            if (data.results.length === 0) {
                this.finished = true
                return
            }
            this.page ++
           } catch (error) {
               setTimeout(() =>{
                   this.loadUserArticle()
               },500)
           }
       },
       async loadUserFigure () {
           const { data:{ data }} = await getUserFigure()
           console.log(data)
           this.figureData = data
       },
       async loadAnnouncements () {
           const { data:{data} } = await getAnnouncements ({
                page: this.page,
                per_page: this.per_page
            })
            console.log(data)
            this.announcementList.push(...data.results)
            // 加载状态结束
            this.loading = false;
            if (data.results.length === 0) {
                this.finished = true
                return
            }
            this.page ++
       }
    },
};
</script>

<style lang="less" scoped>
.my-dynamic {
    .mydynamic-content{
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        top: 90px;
        overflow: auto;
    }
    .figure-content{
        .van-row{
            display: flex;
            justify-content: space-between;
            .van-cell{
                background-color: #f9f9f9;
                flex: 1;
            }
            .van-cell:first-child{
                margin-left: 15px;
                .van-cell__title{
                    font-size: 18px;
                }
                .van-cell__label{
                    font-size: 16px;
                }
            }
        }
    }
}
</style>